import React, { useState, useEffect } from 'react';
import { Button, Space, Table, Modal, Drawer, Form, Input, Select, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import * as salary from '../../../api/salary'

function Details(props: any) {
    interface DataType {
        key: string;
        sname: string
        department: string;
        post: string;
        ipnone: string;
        snumber: string;
        idcard: string;
        payable: string;
        actual: string;
        id: string;
    }


    // 创建列表渲染数据
    const [tableData, setTableData] = useState<DataType[]>([])
    // 设置抽屉开关
    const [open, setOpen] = useState(false);
    // 设置添加编辑开关
    const [flag, setFlag] = useState(true)
    // 开启抽屉
    let onOpen = () => {
        console.log(flag);
        setOpen(true)
    }
    let onClose = () => {
        setOpen(false)
        setFlag(true)
        form.setFieldsValue({ sname: '', department: '', post: '', iphone: '', snumber: '', idcard: '', effective: '', providestatus: '', actualstatus: '', affirmstatus: '' })
    }
    // 表格列表
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            key: 'num',
            render: (_, record) => <span>{tableData.indexOf(record) + 1}</span>
        },
        {
            title: '姓名',
            dataIndex: 'sname',
            key: 'sname',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '部门',
            dataIndex: 'department',
            key: 'department',
            render: (text) => <span>{text == '1' ? '项目部' : (text == '2' ? '销售部' : '产品部')}</span>,
        },
        {
            title: '岗位',
            dataIndex: 'post',
            key: 'post',
            render: (text) => <span>{text == '0' ? '经理' : '员工'}</span>,
        },
        {
            title: '手机号',
            dataIndex: 'iphone',
            key: 'iphone',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '工号',
            dataIndex: 'snumber',
            key: 'snumber',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '证件号',
            dataIndex: 'idcard',
            key: 'idcard',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '有效时间',
            dataIndex: 'effective',
            key: 'effective',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '发放状态',
            dataIndex: 'providestatus',
            key: 'providestatus',
            render: (text) => <span>{text == '0' ? '未发送' : (text == '1' ? '已发送' : (text == '2' ? '预约发送' : '已撤回'))}</span>,
        },
        {
            title: '查看状态',
            dataIndex: 'actualstatus',
            key: 'actualstatus',
            render: (text) => <span>{text == '0' ? '已查看' : '未查看'}</span>,
        },
        {
            title: '确认状态',
            dataIndex: 'affirmstatus',
            key: 'affirmstatus',
            render: (text) => <span>{text == '0' ? '未确认' : '已确认'}</span>,
        },
        {
            title: '操作',
            key: 'id',
            render: (_, record: any) => (
                <Space size="middle" >
                    <Button onClick={() => { onEdit(record) }}>编辑</Button>
                    <Button danger onClick={() => { onDelete(record) }}>删除</Button>
                </Space>
            ),
        },
    ]
    // 用户列表
    let userlist = async () => {
        var res = await salary.informaction_list()
        console.log(res)
        setTableData(res.data)
    }
    useEffect(() => {
        userlist();
    }, [])
    // 表单验证成功
    let onFinish = async (values: any) => {
        if (flag) {
            console.log(flag);
            console.log(values);
            var res = await salary.informaction_add(values)
            userlist()
            message.success('新增成功', 2, onClose)
        } else {
            console.log(flag)
            let newobj = { id, ...values }
            var res = await salary.informaction_edit(newobj)
            userlist()
            message.success('修改成功', 2, onClose)
        }
    }
    // 表单验证失败
    let onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo)
        message.error('新增失败', 2, onClose)
    }
    // 保存id
    const [id, setId] = useState()
    // 编辑用户
    var [form] = Form.useForm()
    let onEdit = (item: any) => {
        console.log(item)
        setOpen(true)
        setFlag(false)
        setId(item.id)
        form.setFieldsValue(item)
        userlist()
    }
    // 删除工资单
    // 删除框
    let [isModalOpen, setIsModalOpen] = useState(false);
    let onDelete = async (id: any) => {
        var res = await salary.informaction_delete(id)
        console.log(res)
        userlist()
        message.success('删除成功', 2)
    };

    return (
        <div className='paryoll'>
            <Space style={{ margin: 20 }}>
                <Button style={{ width: '200px', height: '100px' }}><span style={{ fontSize: '26px' }}>15人</span><br /><span>全部</span></Button>
                <Button style={{ width: '200px', height: '100px' }}><span style={{ fontSize: '26px' }}>11人</span><br /><span>已发放</span></Button>
                <Button style={{ width: '200px', height: '100px' }}><span style={{ fontSize: '26px' }}>4人</span><br /><span>未发放</span></Button>
                <Button style={{ width: '200px', height: '100px' }}><span style={{ fontSize: '26px' }}>8人</span><br /><span>未确认</span></Button>
                <Button style={{ width: '200px', height: '100px' }}><span style={{ fontSize: '26px' }}>6人</span><br /><span>已确认</span></Button>
                <Button style={{ width: '200px', height: '100px' }}><span style={{ fontSize: '26px' }}>1人</span><br /><span>已预约</span></Button>
            </Space>
            <div style={{ width: '100%', padding: ' 0 0 0 20px', boxSizing: 'border-box', borderBottom: '1px solid #ddd' }}>
                <h3>工资发放</h3>
            </div>
            <Space style={{ margin: 20 }}>
                <Button type="primary" onClick={onOpen}>增加</Button>
            </Space>
            <Table columns={columns} dataSource={tableData} rowKey={"id"} />
            <Drawer title="设置" placement="right" onClose={onClose} open={open}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="姓名"
                        name="sname"
                        rules={[{ required: true, message: '请输入姓名' }]}
                    >
                        <Input disabled={!flag} />
                    </Form.Item>
                    <Form.Item
                        label="部门"
                        name="department"
                        rules={[{ required: true, message: '请选择部门' }]}
                    >
                        <Select
                            disabled={!flag}
                            style={{ width: 220 }}
                            options={[
                                { value: '1', label: '项目部' },
                                { value: '2', label: '销售部' },
                                { value: '3', label: '产品部' }
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        label="岗位"
                        name="post"
                        rules={[{ required: true, message: '请选择岗位' }]}
                    >
                        <Select
                            disabled={!flag}
                            style={{ width: 220 }}
                            options={[
                                { value: '0', label: '经理' },
                                { value: '1', label: '员工' }
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        label="电话"
                        name="iphone"
                        rules={[{ required: true, message: '请输入电话' }]}
                    >
                        <Input disabled={!flag} />
                    </Form.Item>
                    <Form.Item
                        label="工号"
                        name="snumber"
                        rules={[{ required: true, message: '请输入电话' }]}
                    >
                        <Input disabled={!flag} />
                    </Form.Item>
                    <Form.Item
                        label="证件号"
                        name="idcard"
                        rules={[{ required: true, message: '请输入证件号' }]}
                    >
                        <Input disabled={!flag} />
                    </Form.Item>
                    <Form.Item
                        label="有效时间"
                        name="effective"
                        rules={[{ required: true, message: '请输入' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="发放状态"
                        name="providestatus"
                        rules={[{ required: true, message: '请输入' }]}
                    >
                        <Select
                            style={{ width: 220 }}
                            options={[
                                { value: '0', label: '未发送' },
                                { value: '1', label: '已发送' },
                                { value: '2', label: '预约发送' },
                                { value: '3', label: '已撤回' }
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        label="查看状态"
                        name="actualstatus"
                        rules={[{ required: true, message: '请输入' }]}
                    >
                        <Select
                            style={{ width: 220 }}
                            options={[
                                { value: '0', label: '未查看' },
                                { value: '1', label: '已查看' }
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        label="确认状态"
                        name="affirmstatus"
                        rules={[{ required: true, message: '请输入' }]}
                    >
                        <Select
                            style={{ width: 220 }}
                            options={[
                                { value: '0', label: '未确认' },
                                { value: '1', label: '已确认' }
                            ]}
                        />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
        </div>
    );
}

export default Details;